<template lang="pug">
  .clearfix
    .form-shebao-title.font-16.font-weight 员工参保信息
    .clearfix.bg-white.pall-20.has-disabled
      Form.ivu-row(ref="formJoinInsurance" :model="formJoinInsurance" :rules="rules" :label-width="130")
        FormItem.form-item.ivu-col(v-for="item, index of formJoinInsuranceItem" :label="item.label + '：'" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'input'")
            Input(v-model="formJoinInsurance[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled || isOnlyView")
          template(v-if="item.type === 'select'")
            Select(v-model="formJoinInsurance[item.model]" :placeholder="item.placeholder" clearable @on-change="listenCall(item.fn, $event)" :disabled="item.isDisabled || isOnlyView")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="+c_item.value") {{c_item.label}}

    //- 仅展示详情时的按钮
    .clearfix.text-center.mt-20.mb-20(v-if="isOnlyView")
      Button.mr-10(type="info" @click="handlepageUp") 查看上一页
      Button.mr-10(v-if="hasEdit && !isFromWaitInduction" type="info" @click="handleModify") 修改
      Button.mr-10(type="info" @click="handlepageDown") 查看下一页
      Button(v-if="!isFromRoster" type="info" ghost @click="goEmployeeBookList()") 返回花名册
      Button(v-if="isFromRoster" type="info" ghost @click="goRoster()") 返回员工管理

    //- 新建或修改时的按钮
    .clearfix.text-center.mt-20.mb-20(v-if="!isOnlyView")
      Button.mr-10(type="info" @click="handlepageUp") 上一步
      Button.mr-10(type="info" @click="handleSubmit('formJoinInsurance')") 保存
      Button(type="info" @click="handlepageDown" :disabled="!isNext || !formJoinInsurance.employeeId") 下一步
      //- Button(type="info" @click="handlepageDown" :disabled="!isNext") 下一步
</template>

<script>
import { EmployeesApi } from '@/api/Employees.api.js'
import { Common } from '@/utils/common.js'
import { EBbase } from '../EBbase.js'

export default {
  name: '',

  props: {
    // companyId: {
    //   type: String,
    //   default: ''
    // },
    // companyName: {
    //   type: String,
    //   default: ''
    // },
    // employeeId: {
    //   type: String,
    //   default: ''
    // },
    // isOnlyView: {
    //   type: Boolean,
    //   default: false
    // },
    serverFee: {
      type: Number,
      default: 0
    }
  },

  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },

    // 编辑
    hasEdit () {
      return this.actionArr.indexOf('Edit') > -1
    }
  },

  data () {
    return {
      isOnlyView: true,
      companyId: '',
      companyName: '',
      // 参保信息form
      formJoinInsurance: {
        employeeId: '',
        serviceFeeType: 123,
        medicalCardStatus: '',
        medicalCardNo: '',
        providentFundCardNo: '',
        serverFee: 0,
        socialInsuranceUserName: '',
        socialInsurancePassword: ''
      },
      formJoinInsuranceItem: [
        { type: 'select', label: '参保种类', placeholder: '请选择参保种类', prop: 'serviceFeeType', model: 'serviceFeeType', style: 'ivu-col-span-8', options: 'insurancetype', fn: 'handleSelectServiceFeeType' },
        { type: 'input', label: '医保卡领取情况', placeholder: '请输入医保卡领取情况', prop: 'medicalCardStatus', model: 'medicalCardStatus', style: 'ivu-col-span-8' },
        { type: 'input', label: '社保卡卡号', placeholder: '请选择社保卡卡号', prop: 'medicalCardNo', model: 'medicalCardNo', style: 'ivu-col-span-8' },
        { type: 'input', label: '公积金卡卡号', placeholder: '请选择公积金卡卡号', prop: 'providentFundCardNo', model: 'providentFundCardNo', style: 'ivu-col-span-8' },
        { type: 'input', label: '服务费', placeholder: '请选择服务费', prop: 'serverFee', model: 'serverFee', style: 'ivu-col-span-8', isDisabled: true },
        { type: 'input', label: '社保查询账号', placeholder: '请选择社保查询账号', prop: 'socialInsuranceUserName', model: 'socialInsuranceUserName', style: 'ivu-col-span-8' },
        { type: 'input', label: '社保查询密码', placeholder: '请选择社保查询密码', prop: 'socialInsurancePassword', model: 'socialInsurancePassword', style: 'ivu-col-span-8' }
      ],
      rules: {
        serviceFeeType: [
          { required: true, message: '请选择参保种类' }
        ]
      },
      arrListDown: {
        tempOptions: [
          { value: 1, label: '社保' },
          { value: 2, label: '公积金' },
          { value: 3, label: '商业保险' },
          { value: 12, label: '社保+公积金' },
          { value: 13, label: '社保+商保' },
          { value: 23, label: '公积金+商保' },
          { value: 123, label: '社保+公积金+商保' }
        ],
        insurancetype: []
      },
      isNext: false,
      isFromRoster: null,
      isFromWaitInduction: null
    }
  },

  watch: {
  },

  mounted () {
    this.formJoinInsurance.employeeId = this.$route.query.employeeId
    this.companyId = this.$route.query.companyId
    this.companyName = this.$route.query.companyName
    this.isFromRoster = this.$route.query.isFromRoster // 是否从员工管理页面过来
    this.isFromWaitInduction = this.$route.query.isFromWaitInduction // 是否从待入职员工页面过来
    console.log('员工参保信息页面，员工ID: ', this.formJoinInsurance.employeeId)

    // URL参数有员工ID时，获取员工基本信息
    if (this.formJoinInsurance.employeeId) {
      this.query()
      this.rules = {}
    }

    if (this.$route.query.isCreateNew) { // isCreateNew参数为true时，为新增
      this.isOnlyView = false
    }

    this.isNext = !this.$route.query.isCreateNew || this.$route.query.employeeId
    console.log('员工参保信息this.isNext: ', this.isNext)

    this.getEnum()
  },

  methods: {
    // 监听所有调用的方法
    // listenCall(methodsWords, e) {
    //   this[methodsWords](e)
    // },
    listenCall (methodsWords, ...values) {
      this[methodsWords](...values)
    },

    // 数据字典
    getEnum () {
      let groupName = 'employee.insurancetype'
      Common.getEnum(groupName, this.arrListDown)
      console.log('xxxxxxxxxxxxxxxxxx 数据字典：', this.arrListDown)
    },

    handleSelectServiceFeeType (id) {
      console.log('参保信息： ', id)
      // this.isNext = true
      this.$emit('handleSelectServiceFeeType', id)
    },

    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          console.log('提交表单', this[name])
          EmployeesApi.postInsuranceInfo(this[name]).then(resp => {
            console.log('resp: ', resp)
            if (resp.data.code === 200 && resp.data.success === true) {
              this.$Message.success(resp.data.message)
              this.isNext = true
            } else {
              this.$Message.error({
                content: resp.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
          this.$Message.warning('输入有误，请返回检查!')
        }
      })
    },

    // 上一步
    handlepageUp () {
      Common.pageUp(this)
    },

    // 下一步
    handlepageDown () {
      if ([2, 23].indexOf(this.formJoinInsurance.serviceFeeType) !== -1) { // 选择了'公积金' || '公积金+商保'
        Common.pageDown(this, 5)
        console.log('aaaaaaaaaaaa')
      } else if (this.formJoinInsurance.serviceFeeType === 3) { // 选择了'商业保险'
        Common.pageDown(this, 6)
        console.log('bbbbbbbbbbb')
      } else {
        Common.pageDown(this)
        console.log('ccccccccccc')
      }
    },

    // 新建标签
    handleAddTag (index, model) {
      var num = this.formJoinInsuranceItem[index].files.length
      this.formJoinInsuranceItem[index].files.push(num)
      this.formJoinInsurance[model] = this.formJoinInsuranceItem[index].files.join(',')
    },

    // 删除标签
    handleCloseTag (index, c_index) {
      this.formJoinInsuranceItem[index].files.splice(c_index, 1)
    },

    // 获取员工参保信息
    async query () {
      var self = this
      var params = {
        id: this.formJoinInsurance.employeeId
      }
      let res = await EmployeesApi.getInsuranceInfoList(params)
      console.log('获取员工参保信息res: ', res)
      if (res.data.code === 200 && res.data.success) {
        var result = res.data.data
        for (var item in result) {
          this.formJoinInsurance[item] = result[item]
        }
      } else {
        
        console.log(res.data.message)
      }

      this.formJoinInsurance.serverFee = this.serverFee ? this.serverFee : 0
      console.log('从基本信息里获取到的服务费是：', this.formJoinInsurance.serverFee)
    },

    // 修改
    handleModify () {
      this.isNext = true
      // this.$emit('handleModify', 3)
      this.isOnlyView = false
    },

    // 返回员工花名册列表
    goEmployeeBookList () {
      EBbase.goEmployeeBookList(this.$router, this.companyId, this.companyName)
    },

    // 返回员工管理
    goRoster () {
      EBbase.goRoster(this.$router)
    }
  }
}
</script>

<style lang="less" scope>
</style>
